Bjarne Fyrstenborg
07/12/2023, 10:56 PMDean Leigh
07/13/2023, 7:51 AMBjarne Fyrstenborg
07/13/2023, 8:23 AMdata-*
attributes.Dean Leigh
07/13/2023, 9:33 AMModel.Settings.Value
in any page using
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
Bjarne Fyrstenborg
07/13/2023, 9:37 AMDean Leigh
07/13/2023, 11:13 AMMike Chambers
07/13/2023, 1:30 PMcsharp
<div class="umb-block-grid__area-container" style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
@foreach (var area in Model.Areas)
{
@* @await Html.GetBlockGridItemAreaHtmlAsync(area) *@
<partial name="blockgrid/area" model="area" view-data='Html.BlocGridSettings(Model.Settings, area.Alias)' />
}
</div>
simplified
csharp
public static ViewDataDictionary BlocGridSettings(this IHtmlHelper htmlHelper, IPublishedElement? element, string alias)
{
object? bgImage = htmlHelper.BlockGridSettingsBgImage(element, alias);
return new ViewDataDictionary(htmlHelper.ViewContext.ViewData) {{ "bgImage", bgImage } };
}
public static object? BlockGridSettingsBgImage(this IHtmlHelper htmlHelper, IPublishedElement? element, string alias)
{
return element?.Value($"{alias}BackgroundImage");
}
Mike Chambers
07/13/2023, 1:32 PMMike Chambers
07/13/2023, 1:33 PMpublic static async Task<IHtmlContent> GetBlockGridItemsHtmlAsync(this IHtmlHelper html, IEnumerable<BlockGridItem> items, string template = DefaultItemsTemplate)
=> await html.PartialAsync(DefaultFolderTemplate(template), items);
public static async Task<IHtmlContent> GetBlockGridItemAreasHtmlAsync(this IHtmlHelper html, BlockGridItem item, string template = DefaultItemAreasTemplate)
=> await html.PartialAsync(DefaultFolderTemplate(template), item);
public static async Task<IHtmlContent> GetBlockGridItemAreaHtmlAsync(this IHtmlHelper html, BlockGridArea area, string template = DefaultItemAreaTemplate)
=> await html.PartialAsync(DefaultFolderTemplate(template), area);
Mike Chambers
07/13/2023, 1:34 PMpublic static async Task<IHtmlContent> GetBlockGridItemAreasHtmlAsync(this IHtmlHelper html, BlockGridItem item, string template = DefaultItemAreasTemplate, ViewDataDictionary vdd)
=> await html.PartialAsync(DefaultFolderTemplate(template), item, vdd);
Bjarne Fyrstenborg
07/13/2023, 3:52 PMpublic static async Task<IHtmlContent> GetBlockGridItemAreaHtmlAsync(this IHtmlHelper html, BlockGridArea area, string template = "area", ViewDataDictionary? viewData = null)
=> await html.PartialAsync($"blockgrid/{template}", area, viewData);
and then replacing this in core `areas.cshtml`:
<div class="umb-block-grid__area-container"
style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
@foreach (var area in Model.Areas)
{
//@await Html.GetBlockGridItemAreaHtmlAsync(area)
@await Html.GetBlockGridItemAreaHtmlAsync(area, viewData: new ViewDataDictionary(ViewData) { { "settingsSection", Model.Settings as BlockSettingsSection }})
}
</div>
but it seems I get this error, because we have multiple layout sections with the settings block.Dean Leigh
07/13/2023, 6:20 PMDean Leigh
07/13/2023, 6:27 PM@{
if (Model?.Areas.Any() != true) { return; }
bool hasSettings = Model.Settings != null;
string colorLabel = null;
if (hasSettings)
{
var backgroundColour = Model.Settings.Value<ColorPickerValueConverter.PickedColor>("layoutSettingsColourPicker");
colorLabel = backgroundColour?.Label;
}
}
<div class="layout py-3" style="@(hasSettings && colorLabel != null ? $"background-color: var({colorLabel});" : "")" data-block-alias="@Model.Content.ContentType.Alias">
@RenderBody()
</div>
Bjarne Fyrstenborg
07/14/2023, 6:30 AMpublic static async Task<IHtmlContent> GetBlockGridItemAreaHtmlAsync(this IHtmlHelper html, BlockGridArea area, string template = "area", ViewDataDictionary? viewData = null)
=> await html.PartialAsync($"blockgrid/{template}", area, viewData);
public static async Task<IHtmlContent> GetBlockGridItemsHtmlAsync(this IHtmlHelper html, IEnumerable<BlockGridItem> items, string template = "items", ViewDataDictionary? viewData = null)
=> await html.PartialAsync($"blockgrid/{template}", items, viewData);
In default.cshtml:
<div class="umb-block-grid"
data-grid-columns="@(Model.GridColumns?.ToString() ?? "12");"
style="--umb-block-grid--grid-columns: @(Model.GridColumns?.ToString() ?? "12");">
@await Html.GetBlockGridItemsHtmlAsync(Model, viewData: new ViewDataDictionary(ViewData))
</div>
Bjarne Fyrstenborg
07/14/2023, 6:31 AM@await Html.PartialAsync(partialViewName, item, new ViewDataDictionary(ViewData))
Bjarne Fyrstenborg
07/14/2023, 6:32 AM<div class="umb-block-grid__area-container"
style="--umb-block-grid--area-grid-columns: @(Model.AreaGridColumns?.ToString() ?? Model.GridColumns?.ToString() ?? "12");">
@foreach (var area in Model.Areas)
{
//@await Html.GetBlockGridItemAreaHtmlAsync(area)
@await Html.GetBlockGridItemAreaHtmlAsync(area, viewData: new ViewDataDictionary(ViewData) { { $"{area.Alias}_settingsSection", Model.Settings as BlockSettingsSection }})
}
</div>
Bjarne Fyrstenborg
07/14/2023, 6:32 AM<div class="umb-block-grid__area"
data-area-col-span="@Model.ColumnSpan"
data-area-row-span="@Model.RowSpan"
data-area-alias="@Model.Alias"
style="--umb-block-grid--grid-columns: @Model.ColumnSpan;--umb-block-grid--area-column-span: @Model.ColumnSpan; --umb-block-grid--area-row-span: @Model.RowSpan;">
@await Html.GetBlockGridItemsHtmlAsync(Model, viewData: new ViewDataDictionary(ViewData))
</div>
Bjarne Fyrstenborg
07/14/2023, 6:33 AMvar settingsSection = ViewData[$"left_settingsSection"] != null ? ViewData[$"left_settingsSection"] as BlockSettingsSection : null;
Mike Chambers
07/14/2023, 8:44 AMBjarne Fyrstenborg
07/14/2023, 8:55 AMMike Chambers
07/14/2023, 9:07 AMDean Leigh
07/17/2023, 11:52 AMMike Chambers
07/17/2023, 12:01 PMDean Leigh
07/17/2023, 12:07 PMMike Chambers
07/17/2023, 12:09 PM<partial />
doesn't work.. it's that I've added passing in view-data
which then means that block preview package doesn't pass on the view-model
so trying to render the partial fails.Dean Leigh
07/17/2023, 12:09 PMMike Chambers
07/17/2023, 12:09 PMDean Leigh
07/17/2023, 12:10 PMMike Chambers
07/17/2023, 12:10 PMDean Leigh
07/17/2023, 12:10 PMMike Chambers
07/17/2023, 12:13 PM<partial />
vs Html.PartialAsync()